How To Add Related Posts In WordPress Without Plugin?
October 4th, 2016 | by Ravi Chahar || 13 Comments |
There are many websites which show the related content below every single post. Do you want to add related posts in WordPress?
There are many plugins which can help you to accomplish your goal. But if you want to get rid of the plugins then you should add your own code.
In this tutorial, I am going to provide you the code to add related posts in WordPres theme. You can use this code even in your existing theme.
Related content can help you keep your readers for more time on your website which will help to reduce your website’s bounce rate.
Add Related Posts In WordPress Website Using single.php file.
Before starting, you should know about the WordPress theme file structure so that anatomy of a WordPress theme can be understood.
The single.php file handles the output of the single blog post and the related posts should be added below each blog post.
Open the theme folder and edit the single.php file. Whether you can edit the file from your cPanel or from the theme editor. Just go to appearance>>editor>>single.php.
If you are developing a new theme then just open the single.php file to edit.
Add the code shown Below.
<h3 id=”related-heading”>Related Posts</h3>
<?php
$RelatedPosts = new WP_Query( array(‘orderby’ => ‘rand’, ‘posts_per_page’ => ‘4’));
if ($RelatedPosts->have_posts()) :
while ( $RelatedPosts->have_posts()) : $RelatedPosts->the_post(); ?> <div class=”related-thumbnail”>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
In this code, a loop is used with the WordPress “WP_Query” class. The thumbnail and the title of the posts are added in a single <div> tag.
It’s important to make post title a link to make it clickable. The same thing is important for a thumbnail. You should link thumbnail to post so that when someone clicks, he/she can open the full post.
NOTE:- In the above code the thumbnail function is used, if you want to use any other thumbnail then you should know how to add thumbnail in WordPress theme.
If you want to show more posts then you can change the number from “4” to anything.
To make it simple, I have made a single link for both title and the thumbnail.
To adjust the layout, you have to add the CSS in the style.css file.
h3#related-heading {font-size: 28px; margin: 0 0 15px 0; line-height: 2em; }
.related-thumbnail {margin: 0 1px 0 1px; float: left; }
.related-thumbnail img {margin: 0 0 3px 0; padding: 0;}
.related-thumbnail a {color :#333; text-decoration: none; display:block; padding: 4px; width: 177px;}
If you want to adjust the width of each related post then you can adjust it by altering the width of the “.related-thumbnail a”.
Let me show you the output.
Here the value is “177px“. You can change it according to the width of your website.
Can You Now Add Related Posts In WordPress?
Adding the related posts is one of the best ideas for your website. It’s always good to keep your readers on your website by providing them some more interesting content.
The above code would do the work for you. But if you have a little bit of knowledge about the CSS language then you can easily change the output of the related posts.
Add related posts in WordPress by focusing on the WordPress loop and the WP_Query class. If you still have any doubt, feel free to ask.
Related Posts
13 comments
Leave a Reply
This is awesome Ravi, thanks for showing us how to do this. I used to be afraid of messing with the Stylesheet but I’ve come to love it now. ?
There are still things I need to learn…I’m glad I found your blog – I think you’ll be able to teach me some new things about WordPress. ?
Have a great week my friend!
Cori
Hey Cori,
We all learn time to time. And WordPress has many things to learn about. Most of the people prefer to use the plugins fo adding the related posts, they should know the simple yet effective codes.
Web designing isn’t so hard if you like to play with the layout of your website. I am just trying to provide the things I have learnt about WordPress.
Thanks for sharing your thoughts.
Have a wonderful day.
~Ravi
Excellent tips. I will try on my blog at gosview.com
Thanks for sharing your guides.
Hey Palashtd,
Sure, you can use this code to your blog. You just have to adjust the width of the related posts according to the layout of your blog.
Thanks for the contribution.
~Ravi
Hi Ravi,
Thank you so much. Each time I visit you I learn something and that is the excellence of your blog. We walk away with something learned and we can apply. This is amazing and I didn’t know one can do this until now.
You are so awesome and I am so happy I connected with you and can call you a friend.
-Donna
Hey Donna,
You know that it makes me happy when you visit my blog and appreciate my work. We all are here to help each other. And when it comes to WordPress then you can do a lot of things with it.
Most of the people are reliable on plugins, but there are codes to replace them.
Thanks for your wonderful comment.
Have a happy day.
~Ravi
Hey Ravi!
Another excellent tutorial. You are on a roll man!
I use the YARPP plugin to display related posts as I never actually tied to dig deep and find a way to make this work without using the plugin. I think this is an excellent solution to reduce your dependency on 3rd party plugins.
Thanks for sharing. Will definitely try this out in my free time.
~Arpit Roy
Hi Arpit,
There are many plugins to show related posts. I have tried many. But the problem is the layout of the website. No plugin was useful for me. So I did that using my own codes.
Depending on the plugins is stopping many bloggers to explore.
Thanks for stopping by.
Have a nice day.
~Ravi
Nice post mate, adding related posts in WordPress was actually a burden for many bloggers as there was lack of knowledge and plugins available few years back. But now everything has changed and one can easily make use of the many plugins available in WordPress. And also I must say related posts plugin from WordPress plugins list is quite easy to set up and it differentiates the posts and shows the related posts with ease of effort.
Keep writing more great stuff.
Hey Rajkumar,
In the previous days, there were limited plugins to add related posts. But now, many developers has done a great job. But here, I have provided the code to show it manually.
Thanks for stopping by.
~Ravi
Hey Rajkumar,
In the previous days, there were limited plugins to add related posts. But now, many developers has done a great job. But here, I have provided the code to show it manually.
Thanks for stopping by.
~Ravi
Hi Ravi. Thanks for point me in the right direction with this. Since you’re calling it “related posts” I would add another parameter to the WP_Query to get related posts instead of any random post. You could use the “cat” or “tag” arguments to get back posts that are in the same category or have the same tags.
Hey Ben,
Of course, I could use the categories or tags to display the related posts. But that would make the code quite complicated. And the main benefit of showing the random posts is you can get exposure to your older posts too.
Thanks for your advice.
Have a great weekend.
~Ravi